<style>  
    /* 网格容器样式 */  
    .grid-container {  
        display: grid;  
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根据需要调整列宽 */  
        gap: 10px; /* 网格项之间的间隙 */  
        padding: 10px; /* 容器内边距 */  
        border: 2px solid #333; /* 容器边框 */  
        border-radius: 8px; /* 容器边框圆角 */  
    }  

    /* 网格项样式 */  
    .grid-item {  
        /*padding: 10px; /* 网格项内边距 */  
        /*border: 1px solid #666; /* 网格项边框 */  
        border-radius: 4px; /* 网格项边框圆角 */  
        display: flex; /* 使用Flexbox来水平居中图标和文本 */  
        align-items: center; /* 垂直居中 */  
        justify-content: center; /* 水平居中（但在这里可能不是必需的，因为您可能想要图标在左，文本在右） */  
        flex-direction: column; /* 如果需要垂直堆叠图标和文本 */  
        text-align: center; /* 确保文本居中（如果flex-direction不是row） */  
    }  

    /* 如果您想要图标和文本水平排列，并且文本在右侧，可以这样做： */  
    /*.grid-item i, .grid-item span{  */
        /*display: inline-block; /* 确保它们可以并排显示 
        vertical-align: middle; /* 垂直居中图标和文本（如果它们不是flex子项） */  
    /*}  */

    /* 如果您想要对特定的网格项进行样式调整，可以添加额外的类 */  
    /* 例如，给第一个网格项添加不同的边框颜色 */  
    .grid-item:first-child {  
        border-color: #f00; /* 红色边框 */  
    }  
    .grid-item i img{
    
        height: 20px;
    }
    .grid-item a {  
        display: block; /* 使整个a标签成为块级元素，可以包含其他块级或内联元素 */  
        text-align: center; /* 使内容居中 */  
        padding: 10px; /* 添加一些内边距以分隔内容 */ 
        color: #333;
    }  

    .grid-item a .item-content {  
        display: flex; /* 使用Flexbox布局 */  
        flex-direction: column; /* 使得子元素垂直排列 */  
        align-items: center; /* 水平居中子元素 */  
    }  

    .grid-item a .item-content i {  
        margin-bottom: 1px; /* 在图标和文本之间添加一些间距 */  
    } 
</style> 
<div class="grid-container">  
<div class="grid-item">
    <a href="/">
       <div class="item-content">  
            <i><img src="static/iconfont/sy.png" alt="首页图标"></i>  
            <span>首页1</span>  
        </div> 
    </a>
</div>
<div class="grid-item">
     <a href="/?about/">
         <div class="item-content">
            <i><img src="static/iconfont/gywm.png"></i>
            <span>关于我们2</span>
         </div>
    </a>
</div>
<div class="grid-item">
     <a href=" /?news/">
         <div class="item-content">
            <i><img src="static/iconfont/xwzx1.png"></i>
            <span>新闻动态3</span> 
         </div>
    </a>
</div>
<div class="grid-item">
     <a href="/?shenqing/">
         <div class="item-content">
            <i><img src="static/iconfont/lxsq.png"></i>
            <span>留学申请4</span>
         </div>
    </a>
</div>
<div class="grid-item">
    <a href="/?fengcai/">
        <div class="item-content">
            <i><img src="static/iconfont/jszz.png"></i>
            <span>教师学员5</span>
        </div>
    </a>
</div>
<div class="grid-item">
     <a href="/?contact/">
         <div class="item-content">
             <i><img src="static/iconfont/lxwm1.png"></i>
            <span>联系我们6</span> 
         </div>
    </a>
</div>
<div class="grid-item">
     <a href="/?page_14/">
         <div class="item-content">
            <i><img src="static/iconfont/xc1.png"></i>
            <span>企业相册7</span>
         </div>
    </a>
</div>
<div class="grid-item">
     <a href="/?page_15/">
         <div class="item-content">
            <i><img src="static/iconfont/jsb.png"></i>
            <span>备忘录8</span> 
         </div>
    </a>
</div>
<div class="grid-item">
     <a href="">
         <div class="item-content">
            <i><img src="static/iconfont/gywm.png"></i>
            <span>客服9</span> 
         </div>
    </a>
</div>
</div>  
